<template>
  <div class="slider" @mouseenter="mouseenter" @mouseleave="mouseleave">
    <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" :key="index" v-for="(url, index) in imglistBox">
          <div class="img" :style="{ backgroundImage: `url('${url}')` }" :class="'img-' + index" />
        </div>
      </div>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="button-prev" @click.stop="prev"></div>
      <div class="button-next" @click.stop="next"></div>
    </div>
  </div>
</template>

<script>
  let index = 0;
  export default {
    data() {
      const than = this;
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          autoplay: {
            delay: 3000,
          },
          on: {
            click(e) {
              than.handleClickSlide(e, this.realIndex);
            },
          }
        },
        imglistBox: [],
        imglist: [
          require('../assets/homelbt/0.png'),
          require('../assets/homelbt/1.png'),
          require('../assets/homelbt/2.png'),
          require('../assets/homelbt/4.png'),
          require('../assets/homelbt/5.png')
        ],
        imglistM: [
          require('../assets/homelbt/m/1.jpg'),
          require('../assets/homelbt/m/2.jpg'),
          require('../assets/homelbt/m/3.jpg'),
          require('../assets/homelbt/m/4.jpg'),
          require('../assets/homelbt/m/5.jpg')
        ]
      }
    },
    created() {
      this.imglistBox = window.innerWidth <= 640? this.imglistM : this.imglist
    },
    mounted() {
      // console.log(this.swiper)
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      },
    },
    methods: {
      handleClickSlide(e, index) {
        // if (e.path && e.path[0] && e.path[0].className.indexOf('button') === -1) {
          if(e.target.className.includes('button')) return
          if (index === 3) {
            Bus.$emit("go-reg", 5);
            this.$router.push({ path: '/usercenter' })
          }
      },
      mouseenter() {
        this.swiper.autoplay.stop();
      },
      mouseleave() {
        this.swiper.autoplay.start();
      },
      prev() {
        const index = this.swiper.activeIndex;
        this.swiper.slideTo(index <= 0 ? 0 : index - 1, 1000, false);
      },
      next() {
        // console.log('next:', arguments)
        const index = this.swiper.activeIndex;
        const len = this.imglist.length;
        this.swiper.slideTo(index >= len ? 0 : index + 1, 1000, false);
      },
    },
    beforeDestroy() {
      console.log('beforeDes')
      this.imglistBox = this.imglist
    }
  }
</script>

<style lang="scss" scoped>
.slider {
  position: relative;
  &:hover .button-prev, &:hover .button-next {
    display: block;
  }
  .button-prev, .button-next {
    display: none;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    box-shadow: 1px 2px 3px rgba(1, 1, 1, 0.08);
    background: url('../assets/right.svg') center no-repeat;
    background-size: 50%;
    background-color: rgba(1, 1, 1, 0.16);
    transform: translateY(-50%);
    position: absolute;
    z-index: 10;
    top: 50%;
    cursor: pointer;
  }
  .button-prev {
    left: 20px;
    transform: rotate(180deg) translateY(50%);
  }
  .button-next {
    right: 20px;
  }

  .img {
    width: 100%;
    background-position: center;
    background-size: cover;
    height: 34vw;
  }
  @media screen and (max-width: 640px) {
    .button-prev, .button-next {
      width: 40px;
      height: 40px;
    }
    .img {
      background-size: 105%;
      height: 75vw;
    }
  }
}
</style>
